<template>  
  <div class="name">  
    <h2>Location: {{ locationName }}</h2>  
    <div>  
      <input type="text" v-model="editableName" placeholder="Edit location name">  
      <button @click="saveName" class="btn">Save</button>
      <button @click="resetName" class="btn">Reset</button>
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['locationName', 'placeId'],
  data() {  
    return {  
      editableName: this.locationName
    };  
  },  
  watch: {  
    locationName(newVal) {  
      this.editableName = newVal;
    }  
  },  
  methods: {  
    saveName() {  
      // Here, you might want to emit an event or make an API call to save the updated name
      this.$emit('update-location-name', { placeId: this.placeId, newName: this.editableName });
    },  
    resetName() {  
      this.editableName = this.locationName;  
    }  
  }  
};  
</script>

<style scoped>  
/* 添加一些样式，比如输入框和按钮的样式 */
.name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding: 10px;
  border-radius: 15px;
  background-color: rgba(149, 232, 210, 0.473);
  color: white;
  font-family: 'SimSun', serif;
  margin: 25px;
}


.input-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

input[type="text"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  width: 200px;
}

.btn {
  font-size: 14px;
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  background-color: rgba(128, 128, 128, 0.5);
  color: white;
  cursor: pointer;
  border-radius: 8px;
}

.btn:hover {
  background-color: rgba(128, 128, 128, 0.7);
}

.name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  padding: 20px;
  border-radius: 15px;
  background-color: rgba(149, 232, 210, 0.473);
  color: white;
  font-family: 'SimSun', serif;
  margin: 25px 0;
}

h2 {
  margin-bottom: 10px;
}

</style>


  